{# SPDX-License-Identifier: Apache-2.0 -#}
{% extends "base.html" %}
{% block title %}
  {% if form.errors %}
    {% trans %}Error processing form{% endtrans %} –
  {% endif %}
  {% trans %}Reset your password{% endtrans %}
{% endblock %}
{% block content %}
  <div class="horizontal-section">
    <div class="site-container">
      <h1 class="page-title">{% trans %}Reset your password{% endtrans %}</h1>
      <form data-controller="password password-match password-strength-gauge"
            method="post"
            action="{{ request.current_route_path() }}"
            id="reset-password-form">
        <input name="csrf_token"
               type="hidden"
               value="{{ request.session.get_csrf_token() }}">
        {% if form.form_errors %}
          <ul class="errors">
            {% for error in form.form_errors %}<li>{{ error }}</li>{% endfor %}
          </ul>
        {% endif %}
        <div class="form-group">
          <div class="split-layout">
            <label for="password" class="form-group__label">
              {% trans %}Password{% endtrans %}
              {% if form.new_password.flags.required %}
                <span class="form-group__required">{% trans %}(required){% endtrans %}</span>
              {% endif %}
            </label>
            <label for="show-password">
              <input data-action="change->password#togglePasswords"
                     data-password-target="showPassword"
                     id="show-password"
                     type="checkbox"
                     tabindex="4">
              &nbsp;{% trans %}Show passwords{% endtrans %}
            </label>
          </div>
          {{ form.new_password(placeholder=gettext("Select a new password") ,
          required="required",
          autocomplete="new-password",
          spellcheck="false",
          class_="form-group__field",
          data_password_target="password",
          data_password_match_target="passwordMatch",
          data_password_strength_gauge_target="password",
          data_action="input->password-match#checkPasswordsMatch input->password-strength-gauge#checkPasswordStrength",
          aria_describedby="password-errors password-strength",
          ) }}
          {% if form.new_password.errors %}
            <ul id="password-errors" class="form-errors" role="alert">
              {% for error in form.new_password.errors %}<li>{{ error }}</li>{% endfor %}
            </ul>
          {% endif %}
          {{ password_strength_gauge(data_password_strength_gauge_target="strengthGauge") }}
        </div>
        <div class="form-group">
          <label for="password_confirm" class="form-group__label">
            {% trans %}Confirm password{% endtrans %}
            {% if form.password_confirm.flags.required %}
              <span class="form-group__required">{% trans %}(required){% endtrans %}</span>
            {% endif %}
          </label>
          {{ form.password_confirm(placeholder=gettext("Confirm password") ,
          required="required",
          autocomplete="new-password",
          spellcheck="false",
          class_="form-group__field",
          data_password_target="password",
          data_password_match_target="passwordMatch",
          data_action="input->password-match#checkPasswordsMatch",
          aria_describedby="confirm-password-errors",
          ) }}
          {% if form.password_confirm.errors %}
            <ul id="confirm-password-errors" class="form-errors" role="alert">
              {% for error in form.password_confirm.errors %}<li>{{ error }}</li>{% endfor %}
            </ul>
          {% endif %}
        </div>
        <div class="form-group">
          <ul class="form-errors" role="alert">
            <li data-password-match-target="matchMessage" class="hidden"></li>
          </ul>
        </div>
        <input type="submit"
               value="{% trans %}Reset password{% endtrans %}"
               class="button button--primary"
               data-password-match-target="submit"
               tabindex="3">
      </form>
    </div>
  </div>
{% endblock %}
{% block extra_js %}
  <script defer
          src="{{ request.static_path('warehouse:static/dist/js/vendor/zxcvbn.js') }}"></script>
{% endblock %}
